<script setup>
import { reactive, ref, onMounted } from "vue";
import { useWorkflowDesignStore } from "@/stores/workflowDesign";
import { formatToDateTime } from "@/utils/dateUtil";
import {
  FlowDesignForm,
  FormDesignForm,
  FormDesignViewer,
  FlowVersionDrawer,
} from "@/components/WorkflowDesign/Index";

const formQuery = reactive({
  name: "",
});

const loading = ref(false);
const tableData = ref([]);

const pagination = reactive({
  maxResultCount: 10,
  currentPage: 1,
  total: 0,
});
// 查询
const onQuery = () => {
  pagination.currentPage = 1;
  getList();
};
const onCreate = () => {
  editFlowDesignData.visible = true;
  editFlowDesignData.value = {};
};

// 翻页
const onPageChange = () => {
  getList();
};

const editFlowDesignData = reactive({
  value: {
    id: "",
    activeVersion: 0,
    description: "",
    name: "",
  },
  visible: false,
  viewOnly: false,
});

const flowVersionData = reactive({
  value: {
    workflowId: "",
    workflowName: "",
    activeVersion: 0,
    activeFormVersion: 0,
  },
  visible: false,
});

const workflowDesignStore = useWorkflowDesignStore();

const getList = async () => {
  loading.value = true;
  const res = await workflowDesignStore.getAllWorkflows({
    name: formQuery.name,
    maxResultCount: pagination.maxResultCount,
    currentPage: pagination.currentPage,
  });
  loading.value = false;
  tableData.value = res.items;
  pagination.total = res.total;
};

onMounted(() => {
  getList();
});

const confirmDeleteItem = (row) => {
  workflowDesignStore
    .delete({
      id: row.id,
    })
    .then((res) => {
      ElMessage.success({
        type: "success",
        message: "删除成功!",
      });
      getList();
    });
};

const onFlowLock = async (row) => {
  await workflowDesignStore.lockWorkflow({
    id: row.id,
  });
  getList();
};

const showFlowVersion = (row) => {
  flowVersionData.value = {
    workflowId: row.id,
    workflowName: row.name,
    activeVersion: row.activeVersion,
    activeFormVersion: row.activeFormVersion,
  };
  flowVersionData.visible = true;
};
</script>

<template>
  <div>
    <el-card shadow="never">
      <!-- 查询表单 -->
      <el-form :inline="true" :model="formQuery" class="demo-form-inline">
        <el-form-item label="">
          <el-input v-model="formQuery.name" placeholder="流程名称" clearable>
            <template #prefix>
              <el-icon class="el-input__icon"><search /></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onQuery">查 询</el-button>
          <el-button type="primary" @click="onCreate">新 增</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <br />
    <el-card shadow="never" v-loading="loading">
      <el-table
        :data="tableData"
        stripe
        style="width: 100%"
        highlight-current-row
      >
        <el-table-column type="index" width="50" />
        <el-table-column prop="name" label="名称" width="300">
          <template #default="scope">
            {{ scope.row.name }}
            <p>{{ scope.row.workflowNo }}</p>
          </template>
        </el-table-column>

        <el-table-column prop="workflowType" label="分类" width="80">
        </el-table-column>
        <el-table-column prop="description" label="描述"> </el-table-column>

        <el-table-column prop="modifiedTime" label="更新时间" width="200">
          <template #default="scope">
            {{ formatToDateTime(scope.row.modifiedTime) }}
          </template>
        </el-table-column>

        <el-table-column prop="name" label="流程版本" width="100">
          <template #default="scope">
            <el-tooltip content="版本切换" placement="bottom" effect="light">
              <el-button
                type="text"
                :plain="true"
                @click="showFlowVersion(scope.row)"
                size="normal"
              >
                v{{ scope.row.activeVersion }}
              </el-button>
            </el-tooltip>
            &nbsp;
            <!-- <el-tooltip content="预览" placement="bottom" effect="light">
            <el-link
              :underline="false"
              type="primary"
              size="normal"
              @click="showFlowVersion(scope.row)"
            >
              <ElIcon><View /></ElIcon>
            </el-link>
          </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column prop="name" label="表单版本" width="100">
          <template #default="scope">
            <el-tooltip
              content="表单版本管理"
              placement="bottom"
              effect="light"
            >
              <el-button
                type="text"
                @click="showFlowVersion(scope.row)"
                plain
                size="normal"
              >
                <span v-if="scope.row.activeFormVersion > 0"
                  >v{{ scope.row.activeFormVersion }}</span
                >
                <span v-else>
                  <el-icon><plus /></el-icon>
                </span>
              </el-button>
            </el-tooltip>
            &nbsp;
            <!-- <el-tooltip content="预览" placement="bottom" effect="light">
            <el-link
              v-if="scope.row.activeFormVersion > 0"
              :underline="false"
              type="primary"
              size="normal"
              @click="showFlowVersion(scope.row)"
            >
              <ElIcon><View /></ElIcon>
            </el-link>
          </el-tooltip> -->
          </template>
        </el-table-column>
        <el-table-column prop="" label="锁定状态" width="80">
          <template #default="scope">
            <el-popconfirm
              title="确认锁定该条记录，锁定将无法编辑?"
              @confirm="onFlowLock(scope.row)"
            >
              <template #reference>
                <el-button v-if="!scope.row.isLock" type="text" circle
                  >锁定</el-button
                >
              </template>
            </el-popconfirm>
            <ElButton type="default" icon="Lock" link v-if="scope.row.isLock">
              已锁定
            </ElButton>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button type="text" @click="showFlowVersion(scope.row)"
              >模拟</el-button
            >

            <el-popconfirm
              title="确认删除该条记录?"
              @confirm="confirmDeleteItem(scope.row)"
            >
              <template #reference>
                <el-button
                  v-if="!scope.row.isLock"
                  type="text"
                  icon="Delete"
                  circle
                />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <br />
      <!-- 分页 -->
      <el-pagination
        v-model:current-page="pagination.currentPage"
        v-model:page-size="pagination.maxResultCount"
        :page-sizes="[12, 20, 30, 50]"
        size="mini"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
        @size-change="onPageChange"
        @current-change="onPageChange"
      />
      <FlowDesignForm
        v-model:visible="editFlowDesignData.visible"
        v-model:value="editFlowDesignData.value"
        :view-only="editFlowDesignData.viewOnly"
      />

      <FlowVersionDrawer
        v-model:visible="flowVersionData.visible"
        :workflowId="flowVersionData.value.workflowId"
        :workflowName="flowVersionData.value.workflowName"
        :activeVersion="flowVersionData.value.activeVersion"
        :activeFormVersion="flowVersionData.value.activeFormVersion"
        @closed="getList"
      />
    </el-card>
  </div>
</template>

<style></style>
